<template>
  <view class="contexts">
    <!--KEY List -->
    <view class="key_list">
      <view>
        <text class="key_title">大家都在搜</text>
      </view>
      <view class="list_key_item_group">
        <view class="list_key_item">
          <text class="list_key_item_title"
            >无骨无骨鸡爪无骨鸡爪无骨鸡爪无骨鸡爪鸡爪</text
          >
          <image
            class="list_key_item_one_icon"
            src="/static/tabBar/huop.png"
          ></image>
        </view>
        <view class="list_key_item">
          <text class="list_key_item_title">无骨鸡爪</text>
          <image
            class="list_key_item_one_icon"
            src="/static/tabBar/huop.png"
          ></image>
        </view>
        <view class="list_key_item">
          <text class="list_key_item_title">无骨鸡爪</text>
          <image
            class="list_key_item_one_icon"
            src="/static/tabBar/huop.png"
          ></image>
        </view>
        <view class="list_key_item">
          <text class="list_key_item_title">无骨鸡爪</text>
          <image
            class="list_key_item_one_icon"
            src="/static/tabBar/huop.png"
          ></image>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="bangdan">
      <swiper
        class="swiper"
        circular
        autoplay
        style="height: 620px; width: 702rpx"
      >
        <swiper-item class="bangdangroup">
          <view class="bang_group">
            <image class="bang_icon" src="/static/tabBar/remai.png"></image>
            <text>今日热卖榜</text>
          </view>
          <scroll-view class="scorll_items" scroll-y="true">
            <!--  -->
            <view class="foritem" v-for="item in 10">
              <view class="foritem_left">
                <image class="foritem_left_img" src="/static/logo.png"></image>
                <text class="foritem_left_num">1</text>
              </view>
              <view class="foritem_info">
                <view class="foritem_title">
                  动漫二次元手办Overlord不死之王雅儿贝德动漫二次元手办泳装居家服美女动漫二次元手办潮玩摆件
                </view>
                <view class="foritem_info_group">
                  <view class="foritem_info_money_group">
                    <view class="foritem_info_money">￥29.9</view>
                    <view class="foritem_info_number">已售2万+件</view>
                  </view>
                  <view class="foritem_info_current" style="width: 40%">
                    <view class="foritem_info_number_current"
                      >今日销售2万+件</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>

        <swiper-item class="bangdangroup">
          <view class="bang_group">
            <image class="bang_icon" src="/static/tabBar/remai.png"></image>
            <text>30天新品热销榜单</text>
          </view>
          <scroll-view class="scorll_items" scroll-y="true">
            <!--  -->
            <view class="foritem" v-for="item in 10">
              <view class="foritem_left">
                <image class="foritem_left_img" src="/static/logo.png"></image>
                <text class="foritem_left_num">1</text>
              </view>
              <view class="foritem_info">
                <view class="foritem_title">
                  动漫二次元手办Overlord不死之王雅儿贝德动漫二次元手办泳装居家服美女动漫二次元手办潮玩摆件
                </view>
                <view class="foritem_info_group">
                  <view class="foritem_info_money_group">
                    <view class="foritem_info_money">￥29.9</view>
                    <view class="foritem_info_number">已售2万+件</view>
                  </view>
                  <view class="foritem_info_current" style="width: 40%">
                    <view class="foritem_info_number_current"
                      >今日销售2万+件</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
.contexts {
  width: 702rpx;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search_top {
  width: 100%;

  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.backIcon {
  width: 20px;
  height: 20px;
}

.search_input {
  width: 80%;
  font-size: 12px;
}

.search_group {
  width: 70%;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;

  align-items: center;
  background-color: #f7f7f9;
  border-radius: 25px;
}

.search_title {
  font-size: 14px;
}

.interval {
  width: 1px;
  height: 10px;
  margin-left: 8px;
  margin-right: 8px;
  background-color: black;
  color: #f7f7f9;
}

.key_list {
  padding-top: 20px;
  padding-bottom: 20px;
}

.key_title {
  font-size: 14px;
}

.list_key_item_group {
  margin-top: 15px;
}

.list_key_item {
  width: 45%;
  margin-right: 5%;
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 3px;
  padding-bottom: 3px;
}

.list_key_item_one_icon {
  width: 15px;
  height: 15px;
}

.list_key_item_title {
  width: calc(100% - 30px);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.swiper {
  width: 100%;
  border-radius: 5px;
  border: 2px solid #fdfae1;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

.scorll_items {
  width: 702rpx;
  height: 580px;
}

.bang_icon {
  width: 20px;
  height: 20px;
}

.bang_group {
  height: 30px;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.foritem {
  padding: 10rpx 24rpx;
  display: flex;
  flex-direction: row;
  margin-bottom: 24rpx;
}

.foritem_info {
  margin-left: 8px;
  position: relative;
}

.foritem_left {
  width: 70px;
  height: 70px;
  position: relative;
}

.foritem_left_img {
  width: 70px;
  height: 70px;
}

.foritem_left_num {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.1px;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #000000;
  border-top-left-radius: 3px;
}

.foritem_title {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.foritem_info_group {
  width: 100%;
  position: absolute;
  bottom: 0px;
  height: auto;
  display: flex;
  text-align: end;
  flex-direction: row;
  align-items: center;
}

.foritem_info_money {
  color: #ff0000;
  font-size: 28rpx;
  margin-right: 5px;
}

.foritem_info_number {
  color: #999999;
  font-size: 18rpx;
  text-align: center|bottom;
}

.foritem_info_number_current {
  width: 100%;
  width: auto;
  font-size: 18rpx;
  color: #999999;
}

.foritem_info_money_group {
  width: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.foritem_info_current {
  width: 40%;
  font-size: 12px;
}
.bangdangroup {
}
</style>
